<template>
	<div class="heade">
		<div class="content-wrapper">
			<div class="avatar">
				<img v-bind:src="seller.avatar" width="64" height="64">
			</div>
			<div class="content">
				<div class="title">
					<span class="brand">
					</span>
					<span class="name">{{seller.name}}</span>
				</div>
				<div class="description">
					{{seller.description}}/{{seller.deliveryTime}}
				</div>
				<div class="support" v-if="seller.supports">
					<span class="icon"></span>
					<span id="" class="text">
						{{seller.supports[0].description}}
					</span>
				</div>
			</div>
			<div style="clear: both;">
				
			</div>
		</div>
		<div class="bullentin-wrapper">
			{{seller.bulletin}}
		</div>
	</div>
</template>

<script>
	export default{
		name:"heade",
		props:{
			seller:{
				type:Object
			}
		}
	}
</script>

<style>
	.heade{
		color: #fff;
		background: #000;
	}
	.heade .content-wrapper{
		padding: 24px 12px 18px 24px;
		display: -webkit-flex;
		display: flex;
	}
	.avatar{
		display: inline-block;
		border-radius: 4px;
		overflow: hidden;
	}
	.content-wrapper .content{
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		align-items:flex-start;
		padding:2px 8px 2px 0;
		font-size: 14px;
		margin-left: 16px;
	}
	.content-wrapper .content .title{
		display: -webkit-flex;
		align-items: center;
	}
	.content-wrapper .content .brand{
		width: 30px;
		height: 18px;
		background-image: url("../../../resource/img/brand@2x.png");
		background-size: 100% 100%;
	}
	.content-wrapper .content .name{
		font-size: 15px;
		font-weight: bold;
		color: rgb(225,225,225);
		margin-left: 6px;
	}
	.content-wrapper .content .description{
		font-size: 12px;
		color: rgb(225,225,225);
		line-height: 12px;
		margin-top: 8px;
	}
	.content-wrapper .content .support{
		display: -webkit-flex;
		margin-top: 10px;
	}
	.content-wrapper .content .support .icon{
		
	}
</style>